<template>
  <div class="order_list">
    <div class="common_form_search">
      <el-form ref="searchForm" :inline="true" :model="searchForm">
        <el-form-item label="订单号">
          <el-input
            style="width: 220px"
            v-model="searchForm.orderNo"
            placeholder="请输入订单号"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.orderCreateTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="供应商">
          <el-input
            style="width: 220px"
            v-model="searchForm.shopName"
            placeholder="请输入供应商"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="search()"
            >查询</el-button
          >
          <el-button size="small" @click="reset()">重置</el-button>
          <el-button
            v-if="$hasMethod('#export')"
            size="small"
            type="warning"
            @click="exportFile()"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="child_page">
      <div class="list_wrap">
        <div class="flex list_header">
          <p style="width: 27%; padding-left: 20px">商品信息</p>
          <p class="text-center" style="width: 3%">数量</p>
          <p class="text-center" style="width: 10%">租金</p>
          <p class="text-center" style="width: 9%">租期</p>
          <p class="text-center" style="width: 8%">押金</p>
          <p class="text-center" style="width: 15%">实付金额</p>
          <p class="text-center" style="width: 5%">是否买断</p>
          <p class="text-center" style="width: 7%">下期付款金额</p>
          <p style="width: 16%; padding-left: 20px">收货人信息</p>
        </div>
        <div v-for="item in tableData" :key="item.id" class="list_item">
          <div class="flex justify-between align-center item_header">
            <el-tag :type="getOrderStatusType(item.status)">{{
              item.statusName
            }}</el-tag>
            <div class="flex-1 flex align-center">
              <p>ID：{{ item.id }}</p>
              <p>创建时间：{{ item.create_time }}</p>
              <p>订单号：{{ item.trade_no }}</p>
              <p class="sign_icons">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="承租人合同签署中"
                  placement="top-start"
                >
                  <img
                    v-if="item.guarantee_status == 1"
                    src="../../assets/images/db-signing.png"
                    alt="承租人合同签署中"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="承租人合同已签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.guarantee_status == 2"
                    src="../../assets/images/db-signed.png"
                    alt="承租人合同已签署"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="承租人合同未签署"
                  placement="top-start"
                >
                  <img
                    v-if="
                      item.guarantee_status != 1 && item.guarantee_status != 2
                    "
                    src="../../assets/images/db-unsign.png"
                    alt="承租人合同未签署"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合同未签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.sign_status != 1 && item.sign_status != 2"
                    src="../../assets/images/unsign.png"
                    alt="合同未签署"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合同签署中"
                  placement="top-start"
                >
                  <img
                    v-if="item.sign_status == 1"
                    src="../../assets/images/signing.png"
                    alt="合同签署中"
                  />
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="合同已签署"
                  placement="top-start"
                >
                  <img
                    v-if="item.sign_status == 2"
                    src="../../assets/images/signed.png"
                    alt="合同已签署"
                  />
                </el-tooltip>
                <!-- <el-tooltip
                  class="item"
                  effect="dark"
                  content="续租订单"
                  placement="top-start"
                >
                  <img
                    v-if="item.status==51"
                    src="../../assets/images/renew.png"
                    alt="续租订单"
                  />
                </el-tooltip> -->
              </p>
              <p>订单来源：{{ item.source }}</p>
              <p>
                快递信息：
                <span
                  class="blue-font pointer"
                  @click="checkLogistics(item.id)"
                >
                  {{
                    item.logistic.delivery_type == 2
                      ? "上门自取"
                      : item.logistic.delivery_type == 3
                      ? "上门安装"
                      : item.logistic.logistics_no
                      ? `${item.logistic.logistics_no}(${item.logistic.logistics_name})`
                      : "无"
                  }}
                </span>
              </p>
            </div>
            <p>
              <!-- <el-button
                type="primary"
                size="mini"
              >订单设置</el-button> -->
            </p>
          </div>
          <div class="flex item_row">
            <div class="flex" style="width: 27%">
              <el-image
                style="width: 100px; height: 100px"
                :src="item.imgurl ? $globalObj.imgBaseUrl + item.imgurl : ''"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
              <div class="flex-1" style="padding-left: 10px; overflow: hidden">
                <p class="text-ellipsis title blue-font">
                  {{ item.goods_title }}
                </p>
                <p class="meal">套餐信息：{{ item.setmeal_title }}</p>
                <p class="device">
                  设备编号：{{ item.device_number }}
                  <el-button
                    v-if="$hasMethod('#editDevice')"
                    size="mini"
                    class="border-btn"
                    style="margin-left: 5px"
                    @click="editDevice(item)"
                    >更改</el-button
                  >
                </p>
              </div>
            </div>
            <div class="flex flex-center color-666 font-16" style="width: 3%">
              x{{ item.amount }}
            </div>
            <div class="flex flex-column flex-center" style="width: 10%">
              <p class="red-font">
                ￥{{ item.rent_total }}(共{{ item.month_total }}期)
              </p>
              <!-- <p class="color-666">￥{{(item.rent_total/item.month_total).toFixed(2)}}({{item.month_total}}期)</p> -->
              <p style="margin-top: 10px">
                <el-button
                  v-if="$hasMethod('#checkLease')"
                  size="mini"
                  class="border-btn"
                  @click="viewLease(item.id)"
                  >查看租期</el-button
                >
              </p>
            </div>
            <div style="width: 9%" class="color-666 font-12 flex flex-center">
              {{ item.begin_time }}至{{ item.end_time }}(共{{
                item.month_total
              }}期)
            </div>
            <div style="width: 8%" class="flex flex-column flex-center">
              <p class="red-font" v-if="item.rights_auth_no">
                ￥{{ item.foregift }}
              </p>
              <p class="color-999 font-12">
                {{
                  !item.rights_auth_no
                    ? "未授权免押"
                    : item.foregift_deduct == 0
                    ? "押金冻结"
                    : item.foregift > 0
                    ? "部分免押"
                    : "押金全免"
                }}
              </p>
              <p
                class="color-999 font-12"
                style="text-decoration: line-through"
                v-if="item.foregift_deduct > 0"
              >
                ￥{{
                  parseFloat(item.foregift) + parseFloat(item.foregift_deduct)
                }}
              </p>
            </div>
            <div style="width: 15%" class="flex flex-column flex-center">
              <p class="red-font">￥{{ item.lease.paid_rent }}</p>
              <p class="color-999 font-12">
                {{
                  item.pay_type == 1
                    ? "智能合同代扣"
                    : item.pay_type == 2
                    ? "芝麻信用（" +
                      (item.rights_auth_no ? "已授权代扣" : "未授权代扣") +
                      "）"
                    : "花呗"
                }}
              </p>
              <p style="margin-top: 5px">
                <el-button
                  size="mini"
                  type="success"
                  class="long-text-btn"
                  @click="checkPaidBill(item.id, item.lease.paid_rent)"
                  >已付：￥{{ item.lease.paid_rent }}/￥{{
                    item.rent_total
                  }}</el-button
                >
              </p>
              <p style="margin-top: 5px">
                <el-button size="mini" type="warning"
                  >已结租金￥{{ item.lease.settle_amount }}</el-button
                >
              </p>
            </div>
            <div style="width: 5%" class="flex flex-center font-12 color-666">
              {{ item.is_buy_out == 1 ? "可买断" : "不可买断" }}
            </div>
            <div style="width: 7%" class="flex flex-column flex-center">
              <template v-if="JSON.stringify(item.lease.next) !== '[]'">
                <p class="font-12 color-666">￥{{ item.lease.next.amount }}</p>
                <p class="font-12 color-666">{{ item.lease.next.date }}</p>
              </template>
            </div>
            <div style="width: 16%">
              <p class="flex align-center justify-between font-12 color-666">
                <span>{{ item.realname }}</span>
                <span>{{ item.address_mobile }}</span>
              </p>
              <p class="font-12 color-666" style="word-break: break-all">
                {{ item.prov + item.city + item.area + item.address }}
              </p>
              <p style="margin-top: 10px">
                <el-button
                  v-if="$hasMethod('#editAddress')"
                  size="mini"
                  class="border-btn"
                  @click="editAddress(item)"
                  >修改地址</el-button
                >
              </p>
            </div>
          </div>
          <div class="flex item_row">
            <div style="width: 57%" class="detail">
              <p class="color-666">
                认证资料：{{ item.cert_name }}（{{ item.cert_no }}）手机号：{{
                  item.mobile
                }}，人脸识别{{
                  item.authentic.status == 1 ? "通过" : "不通过"
                }}
                性别：{{ item.authentic.sex }} 年龄：{{ item.authentic.age }}
                <el-button
                  v-if="
                    item.idcard_back &&
                    item.idcard_front &&
                    $hasMethod('#checkAuthInfo')
                  "
                  size="mini"
                  class="border-btn"
                  @click="checkAuthInfo(item)"
                  >认证资料</el-button
                >
              </p>
              <p class="color-666" :class="{ 'red-font': item.is_skip == 1 }">
                风控信息：{{
                  item.is_skip == 1 ? "【未风控】商家跳过风控" : item.risk
                }}
                <el-button
                  v-if="item.is_skip == 1"
                  size="mini"
                  class="border-btn"
                  @click="openTip"
                  >手动风控</el-button
                >
              </p>
              <p class="color-666 font-12">用户备注：{{ item.remark }}</p>
              <p class="color-666 font-12">
                客服备注：
                <template v-if="JSON.stringify(item.orderRemark) !== '[]'">
                  {{ item.orderRemark.create_time }}，{{
                    item.orderRemark.username
                  }}添加备注：{{ item.orderRemark.remark }}
                  <span
                    v-if="$hasMethod('#checkRemark')"
                    class="blue-font pointer"
                    style="margin-right: 10px"
                    @click="viewRemark(item.id)"
                    >查看备注记录</span
                  >
                </template>
                <el-button
                  v-if="$hasMethod('#addRemark')"
                  size="mini"
                  class="border-btn"
                  @click="addRemark(item.id)"
                  >添加备注</el-button
                >
              </p>
              <p class="color-666" style="margin-top: 5px">
                <template v-if="JSON.stringify(item.leaseFlow) !== '[]'">
                  第{{ item.leaseFlow.which_period }}期通过支付宝{{
                    item.leaseFlow.pay_type == 1
                      ? "智能合同代扣"
                      : item.leaseFlow.pay_type == 2
                      ? "芝麻信用"
                      : item.leaseFlow.pay_type == 3
                      ? "花呗"
                      : "主动支付"
                  }}{{
                    item.leaseFlow.status == 1
                      ? "支付" + item.leaseFlow.rent + "元"
                      : item.leaseFlow.status == 2
                      ? "退款" + item.leaseFlow.rent + "元"
                      : item.leaseFlow.status == 3
                      ? "买断"
                      : "未支付"
                  }}
                </template>
                <el-button
                  v-if="$hasMethod('#checkFlow')"
                  size="mini"
                  class="border-btn"
                  @click="viewFlow(item.trade_no)"
                  >流水记录</el-button
                >
              </p>
            </div>
            <div style="width: 43%" class="flex flex-column justify-center">
              <p v-if="item.orderRefundReason" style="padding: 0 10px">
                退款原因：{{ item.orderRefundReason }}
              </p>
              <p class="btns flex align-center">
                <el-button
                  v-if="item.status == 10 && $hasMethod('#delivery')"
                  size="mini"
                  type="warning"
                  @click="openDelivery(item.id)"
                  >订单发货</el-button
                >
                <el-button
                  v-if="item.status == 20 && $hasMethod('#receipt')"
                  size="mini"
                  type="warning"
                  @click="confirmReceipt(item.id)"
                  >确认收货</el-button
                >
                <el-button v-if="item.status == 44" size="mini" type="warning"
                  >确认归还</el-button
                >
                <el-button v-if="item.status == 45" size="mini" type="warning"
                  >归还完成</el-button
                >
                <el-button
                  v-if="
                    [
                      20, 30, 40, 44, 45, 60, 61, 62, 11, 12, 13, 14, 15, 16,
                    ].indexOf(item.status) > -1 && $hasMethod('#checkLogistics')
                  "
                  size="mini"
                  type="primary"
                  @click="checkLogistics(item.id)"
                  >查看物流</el-button
                >
                <el-button
                  v-if="
                    [
                      3, 10, 20, 30, 39, 40, 44, 45, 60, 61, 62, 11, 12, 13, 14,
                      15, 16,
                    ].indexOf(item.status) > -1 && item.pact_url != 0
                  "
                  size="mini"
                  type="primary"
                  @click="checkPact($globalObj.imgBaseUrl + item.pact_url)"
                  >查看合同</el-button
                >
                <el-button
                  v-if="[11, 12, 13, 14].indexOf(item.status) > -1"
                  size="mini"
                  type="warning"
                  @click="handleRefundOrder(item.trade_no)"
                  >去处理</el-button
                >
              </p>
            </div>
          </div>
        </div>
      </div>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
    <check-lease ref="checkLease" :order-id="selectedId"></check-lease>
    <set-address
      ref="setAddress"
      :edit-item="editItem"
      @getList="getList"
    ></set-address>
    <set-device
      ref="setDevice"
      :edit-item="editItem"
      @getList="getList"
    ></set-device>
    <set-remark ref="setRemark" :order-id="selectedId" @getList="getList">
    </set-remark>
    <check-remark ref="checkRemark" :order-id="selectedId"></check-remark>
    <check-flow ref="checkFlow" :order-no="selectedId"></check-flow>
    <delivery
      ref="delivery"
      :order-id="selectedId"
      @getList="getList"
    ></delivery>
    <receipt ref="receipt" :order-id="selectedId" @getList="getList"></receipt>
    <auth-info ref="authInfo" :edit-item="editItem"></auth-info>
    <check-bill ref="checkBill" :order-id="selectedId"></check-bill>
    <check-logistics
      ref="checkLogistics"
      :order-id="selectedId"
    ></check-logistics>
  </div>
</template>
<script>
import globalData from "../../utils/global";
import customPage from "@/components/customPage";
import { orderRemindList, orderRemindListExport } from "@/api/order";
import checkLease from "./dialogs/checklease";
import setAddress from "./dialogs/setAddress";
import setDevice from "./dialogs/setDevice";
import setRemark from "./dialogs/setRemark";
import checkRemark from "./dialogs/checkRemark";
import checkFlow from "./dialogs/checkFlow";
import delivery from "./dialogs/delivery";
import receipt from "./dialogs/receipt";
import authInfo from "./dialogs/authInfo";
import checkBill from "./dialogs/checkBill";
import checkLogistics from "./dialogs/checkLogistics";
export default {
  components: {
    customPage,
    checkLease,
    setAddress,
    setDevice,
    setRemark,
    checkRemark,
    checkFlow,
    delivery,
    receipt,
    authInfo,
    checkBill,
    checkLogistics,
  },
  data() {
    return {
      searchForm: {
        orderNo: "",
        shopName: "",
        orderCreateTime: "",
      },
      statusList: globalData.orderStatus,
      total: 0,
      tableData: [],
      selectedId: "",
      editItem: {},
    };
  },
  methods: {
    openTip() {
      this.$alert("商家暂未开启风控", "提示", {
        confirmButtonText: "确定",
      }).then(() => {});
    },
    handleRefundOrder(tradeNo) {
      this.$router.push({ name: "refundList", params: { tradeNo } });
    },
    // 查看合同
    checkPact(url) {
      window.open(url);
    },
    // 查看物流
    checkLogistics(id) {
      this.selectedId = id;
      this.$refs.checkLogistics.dialogVisible = true;
    },
    // 查看已付账单详情
    checkPaidBill(id, paid_rent) {
      if (this.$hasMethod("#checkBill") && paid_rent > 0) {
        this.selectedId = id;
        this.$refs.checkBill.dialogVisible = true;
      }
    },
    // 查看认证资料
    checkAuthInfo(item) {
      this.editItem = {
        idcard_back: item.idcard_back,
        idcard_front: item.idcard_front,
      };
      this.$refs.authInfo.dialogVisible = true;
    },
    // 确认收货
    confirmReceipt(id) {
      this.selectedId = id;
      this.$refs.receipt.dialogVisible = true;
    },
    // 订单发货
    openDelivery(id) {
      this.selectedId = id;
      this.$refs.delivery.dialogVisible = true;
    },
    // 查看流水记录
    viewFlow(trade_no) {
      this.selectedId = trade_no;
      this.$refs.checkFlow.dialogVisible = true;
    },
    // 查看客服备注
    viewRemark(id) {
      this.selectedId = id;
      this.$refs.checkRemark.dialogVisible = true;
    },
    // 添加客服备注
    addRemark(id) {
      this.selectedId = id;
      this.$refs.setRemark.dialogVisible = true;
    },
    // 更改设备编号
    editDevice(item) {
      this.editItem = {
        orderId: item.id,
        deviceNumber: item.device_number ? item.device_number.split(",") : [],
        amount: item.amount,
      };
      this.$refs.setDevice.dialogVisible = true;
    },
    // 修改地址
    editAddress(item) {
      this.editItem = {
        orderId: item.id,
        realname: item.realname,
        mobile: item.address_mobile,
        address: item.address,
        prov: item.prov,
        city: item.city,
        area: item.area,
        province: [item.prov, item.city, item.area],
      };
      this.$refs.setAddress.dialogVisible = true;
    },
    // 查看租期
    viewLease(id) {
      this.selectedId = id;
      this.$refs.checkLease.dialogVisible = true;
    },
    getOrderStatusType(status) {
      const obj = this.statusList.find((item) => item.id == status);
      return obj ? obj.type : "warning";
    },
    getOrderStatusName(status) {
      const obj = this.statusList.find((item) => item.id == status);
      return obj ? obj.name : "";
    },
    // 获取数据
    getList(flag) {
      // flag为true, 则不刷新表格
      const { page, pageSize } = this.$refs.customPage;
      if (!flag) {
        this.tableData = [];
      }
      orderRemindList({
        page,
        pageSize,
        ...this.searchForm,
      }).then((res) => {
        const { list } = res;
        this.tableData = list.data || [];
        this.total = list.total || 0;
      });
    },
    // 查询
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      this.searchForm = {
        orderNo: "",
        shopName: "",
        orderCreateTime: "",
      };
      this.getList();
    },
    // 导出
    exportFile() {
      orderRemindListExport({
        ...this.searchForm,
      });
    },
  },
  mounted() {
    if (this.$route.params.orderId) {
      this.searchForm.orderNo = this.$route.params.orderId;
    }
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.common_form_search {
  padding: 15px 30px 0;
}
.child_page {
  padding-bottom: 15px;
  padding-left: 30px;
  padding-right: 30px;
  p,
  div {
    box-sizing: border-box;
  }
}
.list_wrap {
  position: relative;
}
.list_header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  min-height: 50px;
  z-index: 2;
  background: #f5f5f5;
  border: 1px solid #e6e6e6;
  p {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  p:not(:first-child) {
    border-left: 1px solid #e6e6e6;
  }
}
.list_item {
  border: 1px solid #e6e6e6;
  margin-top: 10px;
}
.item_row {
  border-top: 1px solid #e6e6e6;
  & > div {
    padding: 10px;
    color: #666666;
    &:not(:first-child) {
      border-left: 1px solid #e6e6e6;
    }
  }
}
.detail,
.btns {
  padding: 10px;
}
.btns {
  // border-left: 1px solid #e6e6e6;
  .el-button + .el-button {
    margin-left: 10px;
  }
}
.border-btn {
  height: 25px;
  padding-top: 0;
  padding-bottom: 0;
  background: #ffffff;
  border: 1px solid $mainBlue;
  border-radius: 3px;
  color: $mainBlue;
  font-size: 12px;
}
.sign_icons img {
  width: 21px;
  height: 23px;
  margin-right: 2px;
}
.item_header {
  padding: 5px 10px;
  background-color: #f5f5f5;
  & > div p {
    color: #666666;
    font-size: 12px;
    padding-left: 20px;
  }
}
.title {
  font-size: 16px;
  line-height: 23px;
  padding-bottom: 15px;
}
.meal,
.device {
  font-size: 12px;
  color: #999999;
  line-height: 23px;
}
.item_row p {
  line-height: 23px;
}
.item_row div {
  line-height: 20px;
}
</style>